<template>
  <div>
    <div>
      {{ name }}
    </div>

    <div class="lottery-user">
      <div class="lottery-tips">
<!--        {{ maxAwardTips }}（{{ rollLen }} / {{ maxNum | editNumber }}）-->
      </div>
      <ul>
        <li class="lottery-item" v-for="(item, index) in userArr" :key="index">
          <div class="lottery-roll">
<!--            <div class="roll-item"><img :src="list.HeadImg"></div>-->
            <div class="roll-item"><span>{{ item.name }}</span></div>
            <div class="roll-item"><span>{{ item.phone }}</span></div>
          </div>
        </li>
      </ul>
    </div>
    <el-button @click="startLottery">开始抽奖</el-button>
    <el-button @click="finishLottery">结束抽奖</el-button>
  </div>
</template>

<script>
export default {
  name: "Lottery",
  data() {
    return {
      name: null,
      nameArr: ['1', '2', '3', '11', '12', '13', '21', '22', '23'],
      timer: null,
      userArr: [{'name':'陈德琪','phone':'1111'},{'name':'叶勇干','phone':'2222'},{'name':'李佳奖','phone':'3333'}],  //参与人员
      awardTypes: [], //奖品类别
      alreadyWinPersons: [], //已抽中人员
      totalWinNumber: null, //

    }
  },
  methods: {
    startLottery() {
      if (this.timer !== null) {
        return
      }
      this.timer = setInterval(() => {
        let length = this.nameArr.length
        let number = Math.floor(Math.random() * length);
        this.name = this.nameArr[number]
      }, 100)
    },
    finishLottery() {
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>

<style lang='less' scoped>
.lottery-user {
  height: 7.6vh;
  line-height: 7.6vh;
  text-align: center;
  .lottery-roll{
    display: flex;
    .roll-item{
      width: 20%;
      font-size: 3.6vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
